<template>
  <div class="button">
    <h2>表格组件--有图片有按钮的表格</h2>

    <!-- 外层 data属性负责绑定响应式数据-->
    <el-table :data="list" stripe border style="width:90%;margin:10px auto;">
      <!-- 内层：定义列 -->
      <el-table-column prop="id" label="商品序号" width="90"></el-table-column>

      <!-- 内层：列内部添加其他结构 -->
      <el-table-column label="商品图片">
        <!-- 调用插槽 scope结构的是整一行的数据，相当于v-for循环内的item-->
        <template #default="scope">
          <img :src="scope.row.goodImg" width="50" />
        </template>
      </el-table-column>

      <!-- 内层：加工数据的显示效果 -->
      <el-table-column label="商品价格" prop="goodPrice" width="100">
        <template #default="scope">
          ￥{{scope.row.goodPrice.toFixed(2)}}
        </template>
      </el-table-column>

      <el-table-column label="商品销量" prop="goodSold" width="60"></el-table-column>

      <el-table-column label="操作">
        <template #default>
          <el-button type="danger" :icon="CloseBold" size="small"></el-button>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { CloseBold } from '@element-plus/icons-vue'

const list = reactive([
  {
        "id": "1",
        "goodImg": "https://www.mescroll.com/demo/res/img/pd1.jpg",
        "goodName": "【1】  六罐装荷兰美素佳儿金装2段900g",
        "goodPrice": 1149.00,
        "goodSold": 648,
        "goodCollect": 7128,
        "goodLook" : 17000,
        "categoryID" : 1
    }, {
        "id": "2",
        "goodImg": "https://www.mescroll.com/demo/res/img/pd2.jpg",
        "goodName": "【2】  韩国Amore爱茉莉红吕洗发水套装修复受损发质",
        "goodPrice": 89.00,
        "goodSold": 128,
        "goodCollect": 6128,
        "goodLook" : 16000,
        "categoryID" : 2
    }, {
        "id": "3",
        "goodImg": "https://www.mescroll.com/demo/res/img/pd3.jpg",
        "goodName": "【3】  Friso美素佳儿 金装婴儿配方奶粉3段900g",
        "goodPrice": 195.00,
        "goodSold": 968,
        "goodCollect": 6128,
        "goodLook" : 16000,
        "categoryID" : 1
    }, {
        "id": "4",
        "goodImg": "https://www.mescroll.com/demo/res/img/pd4.jpg",
        "goodName": "【4】  Fisher goodPrice费雪 费雪三轮儿童滑行车",
        "goodPrice": 299.00,
        "goodSold": 85,
        "goodCollect": 788,
        "goodLook" : 26000,
        "categoryID" : 3
    }, {
        "id": "5",
        "goodImg": "https://www.mescroll.com/demo/res/img/pd5.jpg",
        "goodName": "【5】  Babylee巴布力 实木婴儿床 雷卡拉130*70cm",
        "goodPrice": 1889.00,
        "goodSold": 18,
        "goodCollect": 888,
        "goodLook" : 152699,
        "categoryID" : 3
    }, 
])
</script>

<style>

</style>